<div class="issue-table">
    <div class="row">
      <table class="table table-bordered table-hover">
        <thead class="thead-inverse">
        <tr dnd-sortable-container [dropZones]="['th-dropZone']" [sortableData]="columns" >
          <th *ngIf="batchModel">选择</th>

          <th (click)="order('id')" class="link">
            <span>编号</span>

            <span *ngIf="orderByMap.id=='asc'" class="fa fa-long-arrow-up"></span>
            <span *ngIf="orderByMap.id=='desc'" class="fa fa-long-arrow-down"></span>
          </th>

          <ng-container *ngFor="let col of columns; let i = index">
            <th *ngIf="col.display" (click)="order(col.code)" class="link"
                (mouseenter)="col.hover = true" (mouseleave)="col.hover = false"

                dnd-sortable [sortableIndex]="i"
                (onDropSuccess)="onThDropSuccess(col)"
            >
              <span class="move">
                <i *ngIf="col.hover" class="fa fa-arrows"></i>
              </span>

              <span>{{col.label}}</span>

              <span *ngIf="orderByMap[col.code]=='asc'" class="fa fa-long-arrow-up"></span>
              <span *ngIf="orderByMap[col.code]=='desc'" class="fa fa-long-arrow-down"></span>
            </th>
          </ng-container>

          <th *ngIf="!batchModel">操作</th>
        </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of issues">
            <td *ngIf="batchModel">
              <input [(ngModel)]="item.batchSelected" type="checkbox" name="batchSelected">
            </td>

            <td *ngIf="priv['issue:view'] && !batchModel" (click)="dealWithIssue({ act: 'view', item: item})" class="link">
              IS-{{item.id}}
            </td>
            <td *ngIf="!priv['issue:view'] || batchModel">IS-{{item.id}}</td>

            <ng-container *ngFor="let col of columns">
              <td *ngIf="priv['issue:view'] && !batchModel && col.display"
                    (click)="dealWithIssue({ act: 'view', item: item})" class="link">
                <issue-prop-in-table [model]="item" [col]="col"></issue-prop-in-table>
              </td>

              <td *ngIf="(!priv['issue:view'] || batchModel) && col.display">
                <issue-prop-in-table [model]="item" [col]="col"></issue-prop-in-table>
              </td>
            </ng-container>
            <td *ngIf="!batchModel">
              <div style="position: relative">
                <issue-opt [item]="item" [batchModel]="batchModel" (dealWithIssueEvent)="dealWithIssue($event)"></issue-opt>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

    </div>

</div>
